<template>
    <!-- 添加服务页面 -->
    <div class="service-add">
        <head-usual to="/user/service" title="我的服务"></head-usual>
        <form>
            <div class="input-item">
                <p>服务标题</p>
                <input type="text" placeholder="填写你的服务标题"/>
            </div>
             <div class="input-item">
                <p>服务费</p>
                <input type="number" placeholder="单位元"/>
            </div>
             <div class="input-item">
                <p>服务内容</p>
                <textarea placeholder="您可以提供咨询、课程、职业规划指导"></textarea>
            </div>
             <div class="input-item">
                <p>服务时间</p>
                <textarea placeholder="为了更好的匹配您与需求方的时间，您需要描述您在服务周期内的具体服务时间：例如在2018年4月至5月之间每周三早上10:00-12：00，周六晚20:00-21:00..."></textarea>
            </div>
            <div class="button-group">
                <button class="exit">取消</button>
                <button class="save">保存</button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
}
</script>

<style lang='scss' scoped>
    .service-add{
        form{
            padding: 10px 12px 90px 12px;
            .input-item{
                p{
                    font-size: 14px;
                    color: #666;
                    height: 40px;
                    line-height: 40px;
                }
                input{
                    width: 390px;
                    height: 40px;
                    padding-left: 10px;
                    border: 1px solid #dcdcdc;
                    font-size: 14px;
                    color:#666;
                }
                textarea{
                    width: 390px;
                    height: 117.3px;
                     font-size: 14px;
                    color:#666;
                    padding-top: 10px;
                    padding-left: 10px;
                    border: 1px solid #dcdcdc;

                }
               ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                 color:    #dcdcdc;
                 font-size: 14px;
                }
                :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color:    #dcdcdc;
                 font-size: 14px;
                }
                ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color:    #dcdcdc;
                 font-size: 14px;
                }
                :-ms-input-placeholder { /* Internet Explorer 10-11 */
                color:    #dcdcdc;
                 font-size: 14px;
                }
            }
            .button-group{
                width: 313.3px;
                display: flex;
                justify-content: space-between;
                margin: 90px auto;
                button{
                    width: 133.3px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 18px;
                    border-radius: 5px;
                }
                .exit{
                    background: #eee;
                    color: #999;
                }
                .save{
                    background: #fe6b28;
                    color:#fff;
                }
            }
        }
    }
</style>
